<template>
    <div class="my_content ">
        <div class="colorFFF ">
            <Tabs title="设备情况">
                <template #btn>
                    <div style="width: 10rem"></div>
                </template>
            </Tabs>
        </div>
        <div class="bottomPage">
            <div id="echarts_device" style="width:50%;height: 100%;"></div>
            <div class="rightDiv">
                <div class="rightNumDiv" v-for="(item, index) in numList" :key="index">
                    <div class="rightLabel">
                        <div class="labelNum">
                            <div class="leftLabel">
                                <div class="circle" :style="'background-color:' + item.color"></div>{{ item.label1 }}
                            </div>
                            <div style="margin-right: 30px;">
                                <label class="num">{{ item.percentage }}</label>
                                <small>%</small>
                            </div>
                        </div>
                        <div class="labelNum">
                            <div class="leftLabel">
                                <div class="line" :style="'border-color:' + item.color"></div>{{ item.label2 }}
                            </div>
                            <div style="margin-right: 30px;">
                                <label class="num">{{ item.number }}</label>
                                <small>个</small>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import Tabs from "./Tabs.vue"
import { equipmentStatistics } from "src/api/screenDevice";
import { debounce } from 'lodash';
export default {
    name: "LeftEquipmentCondition",
    components: { Tabs },
    inject: ['villageId'],
    data() {
        return {
            response: {
                importantEquipmentMalfunctionSum: '',
                importantEquipmentNormalSum: '',
                malfunctionPercentage: '',
                normalPercentage: '',
                equipmentSum: ''
            },
            numList: [
                {
                    color: '#DDB15C',
                    label1: '所有设备正常占比',
                    percentage: '0',
                    label2: '重要设备正常总数',
                    number: 0
                },
                {
                    color: '#FF993B',
                    label1: '所有设备故障占比',
                    percentage: '0',
                    label2: '重要设备故障总数',
                    number: 0
                }
            ],
            dataList: [
                {
                    name: '所有设备正常占比',
                    value: 0,
                },
                {
                    name: '重要设备正常总数',
                    value: 0,
                },
                {
                    name: '所有设备故障占比',
                    value: 0,
                },
                {
                    name: '重要设备故障总数',
                    value: 0,
                }
            ]
        }
    },
    mounted() {
        this.initEcharts();
        this.setIntervalTotalFn()
    },
    destroyed() {
        clearInterval(this.timer);
        this.timer = null;
        this.myCharts && this.myCharts.dispose()
    },
    methods: { 
        setIntervalTotalFn() {
            if (this.villageId) {
                this.updateEcharts()
                this.timer = setInterval(() => {
                    this.updateEcharts()
                }, 20000);
            }
        },
        // 初始化echarts
        initEcharts() {
            this.myCharts && this.myCharts.dispose()
            let myCharts = echarts.init(document.getElementById('echarts_device'));
            let option = {
                    title: {
                        zlevel: 0,
                        text: ['{value|' + this.response.equipmentSum + '}', '{name|设备总数}'].join('\n'),
                        top: 'center',
                        left: '48%',
                        textAlign: 'center',
                        textStyle: {
                            rich: {
                                name: {
                                    color: '#AE9F85',
                                    fontSize: 14,
                                    lineHeight: 20
                                },
                                value: {
                                    color: '#F5E0B7',
                                    fontWeight: 'bold',
                                    fontSize: 20,
                                    lineHeight: 25
                                }
                            }
                        }
                    },
                    color: ['#DDB15C', '#FBE5BB', '#FF9636', '#FFCEA1'],
                    tooltip: {
                        show: true,
                    },
                    toolbox: {
                        show: false,
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: [50, 60],
                            hoverAnimation: false,
                            clockWise: false,
                            y: 'center',
                            x: 'left',
                            center: ['50%', '50%'],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false,
                                    },
                                },
                            },
                            // data: data,
                        }
                    ]
                };
                myCharts.setOption(option);
                const f = debounce(function () {
                    if (myCharts.isDisposed()) {
                        window.removeEventListener('resize', f)
                    } else {
                        myCharts.resize();
                    }
                }, 500)
                window.addEventListener('resize', f)
                this.myCharts = myCharts
        },
        updateEcharts() {
            equipmentStatistics({ id: this.villageId }).then(res => {
                if (res.success) {
                    this.numList[0].percentage =res.data.normalPercentage && res.data.normalPercentage || 0;
                    this.numList[0].number =res.data.importantEquipmentNormalSum && res.data.importantEquipmentNormalSum || 0;
                    this.numList[1].percentage =res.data.malfunctionPercentage && res.data.malfunctionPercentage || 0;
                    this.numList[1].number = res.data.importantEquipmentMalfunctionSum && res.data.importantEquipmentMalfunctionSum || 0;
                    this.dataList[0].value = res.data.normalPercentage && res.data.normalPercentage || 0;
                    this.dataList[1].value =res.data.importantEquipmentNormalSum && res.data.importantEquipmentNormalSum || 0;
                    this.dataList[2].value = res.data.malfunctionPercentage && res.data.malfunctionPercentage || 0;
                    this.dataList[3].value = res.data.importantEquipmentMalfunctionSum && res.data.importantEquipmentMalfunctionSum || 0;
                    this.response.equipmentSum =res.data.equipmentSum && res.data.equipmentSum || 0;
                }
                let data = [];
                for (const element of this.dataList) {
                    data.push(
                        {
                            value: element.value,
                            name: element.name,
                            itemStyle: {
                                normal: {
                                    borderWidth: 8,
                                    shadowBlur: 20,
                                    borderRadius: 20
                                },
                            },
                        }
                    );
                    if (element.value) {
                        data.push({
                            value: 5,
                            name: '',
                            tooltip: {
                                show: false,
                            },
                            itemStyle: {
                                color: 'rgba(0,0,0,0)'
                            }
                        })
                    }
                }
                let option = {
                    title: {
                        text: ['{value|' + this.response.equipmentSum + '}', '{name|设备总数}'].join('\n'),
                    },
                    series: [
                        {data}
                    ]
                }
                this.myCharts.setOption(option)
            })
        }
    }
}
</script>

<style scoped lang="scss">
.my_content {
    width: 100%;
    height: 100%;

    .bottomPage {
        width: 100%;
        height: 85%;
        display: flex;

        .rightDiv {
            display: flex;
            flex: 1;
            flex-flow: column;
            height: 90%;
            margin-top: 20px;

            .rightNumDiv {
                display: flex;
                flex: 1;
                justify-content: space-around;

                .rightLabel {
                    display: flex;
                    flex-flow: column;
                    justify-content: space-around;
                    flex: 1;
                    max-height: 6rem;

                    .labelNum {
                        color: #AE9F85;
                        font-size: 14px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .leftLabel {
                            display: flex;
                            justify-content: center;
                            align-items: center;

                        }

                        .circle {
                            width: 12px;
                            height: 12px;
                            border-radius: 10px;
                            background-color: white;
                            margin-right: 8px;
                        }

                        .line {
                            width: 11px;
                            height: 25px;
                            margin-left: 5px;
                            border: 1px solid;
                            border-top: 0px;
                            border-right: 0px;
                            margin-top: -30px;
                            margin-right: 8px;
                        }

                        .num {
                            color: #F5E0B7;
                            font-size: 20px;
                            letter-spacing: 1px;
                            color: #FBE5BB;
                            text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.4);

                        }
                    }
                }
            }
        }
    }
}
</style>